<div class="card mb-2">
  <div class="card-body">
    <h1 class="card-title text-center text-primary">Dropdowns</h1>
    <div class="dropdown">
      <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink"
        data-bs-toggle="dropdown" aria-expanded="false">
        Dropdown link
      </a>
      <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
        <li><a class="dropdown-item" href="#">Game of Thrones</a></li>
        <li><a class="dropdown-item" href="#">Battlestar Galactica</a></li>
        <li><a class="dropdown-item" href="#">Lost</a></li>
      </ul>
    </div>
    <hr>
    <div class="dropdown">
      <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink"
        data-bs-toggle="dropdown" aria-expanded="false">
        Dropdown link
      </a>
      <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
        <li><a class="dropdown-item" href="#">Game of Thrones</a></li>
        <li><a class="dropdown-item" href="#">Battlestar Galactica</a></li>
        <li><a class="dropdown-item" href="#">Lost</a></li>
      </ul>
    </div>
    <hr>
    <div class="btn-group">
      <button type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown"
        aria-expanded="false">
        Action
      </button>
      <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Game of Thrones</a></li>
        <li><a class="dropdown-item" href="#">Battlestar Galactica</a></li>
        <li><a class="dropdown-item" href="#">Lost</a></li>
        <li>
          <hr class="dropdown-divider">
        </li>
        <li><a class="dropdown-item" href="#">The Walking Dead</a></li>
      </ul>
    </div>
    <hr>
    <div class="btn-group">
      <button class="btn btn-secondary btn-lg dropdown-toggle me-2" type="button" data-bs-toggle="dropdown"
        aria-expanded="false">
        Large button
      </button>
      <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Game of Thrones</a></li>
        <li><a class="dropdown-item" href="#">Battlestar Galactica</a></li>
        <li><a class="dropdown-item" href="#">Lost</a></li>
        <li>
          <hr class="dropdown-divider">
        </li>
        <li><a class="dropdown-item" href="#">The Walking Dead</a></li>
      </ul>
    </div>
    <div class="btn-group">
      <button class="btn btn-secondary btn-lg" type="button">
        Large split button
      </button>
      <button type="button" class="btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split"
        data-bs-toggle="dropdown" aria-expanded="false">
        <span class="visually-hidden">Toggle Dropdown</span>
      </button>
      <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Game of Thrones</a></li>
        <li><a class="dropdown-item" href="#">Battlestar Galactica</a></li>
        <li><a class="dropdown-item" href="#">Lost</a></li>
        <li>
          <hr class="dropdown-divider">
        </li>
        <li><a class="dropdown-item" href="#">The Walking Dead</a></li>
      </ul>
    </div>
    <hr>
    <div class="btn-group">
      <button class="btn btn-secondary btn-sm dropdown-toggle me-2" type="button" data-bs-toggle="dropdown"
        aria-expanded="false">
        Small button
      </button>
      <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Game of Thrones</a></li>
        <li><a class="dropdown-item" href="#">Battlestar Galactica</a></li>
        <li><a class="dropdown-item" href="#">Lost</a></li>
        <li>
          <hr class="dropdown-divider">
        </li>
        <li><a class="dropdown-item" href="#">The Walking Dead</a></li>
      </ul>
    </div>
    <div class="btn-group">
      <button class="btn btn-secondary btn-sm" type="button">
        Small split button
      </button>
      <button type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split"
        data-bs-toggle="dropdown" aria-expanded="false">
        <span class="visually-hidden">Toggle Dropdown</span>
      </button>
      <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Game of Thrones</a></li>
        <li><a class="dropdown-item" href="#">Battlestar Galactica</a></li>
        <li><a class="dropdown-item" href="#">Lost</a></li>
        <li>
          <hr class="dropdown-divider">
        </li>
        <li><a class="dropdown-item" href="#">The Walking Dead</a></li>
      </ul>
    </div>
    <hr>
    <div class="dropdown">
      <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton2"
        data-bs-toggle="dropdown" aria-expanded="false">
        Dropdown button
      </button>
      <ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="dropdownMenuButton2">
        <li><a class="dropdown-item active" href="#">Action</a></li>
        <li><a class="dropdown-item" href="#">Another action</a></li>
        <li><a class="dropdown-item" href="#">Something else here</a></li>
        <li>
          <hr class="dropdown-divider">
        </li>
        <li><a class="dropdown-item" href="#">Separated link</a></li>
      </ul>
    </div>
    <hr>
    <div class="btn-group dropup">
      <button type="button" class="btn btn-secondary dropdown-toggle me-2" data-bs-toggle="dropdown"
        aria-expanded="false">
        Dropup
      </button>
      <ul class="dropdown-menu">
        <li><a class="dropdown-item active" href="#">Action</a></li>
        <li><a class="dropdown-item" href="#">Another action</a></li>
        <li><a class="dropdown-item" href="#">Something else here</a></li>
        <li>
          <hr class="dropdown-divider">
        </li>
        <li><a class="dropdown-item" href="#">Separated link</a></li>
      </ul>
    </div>
    <div class="btn-group dropup">
      <button type="button" class="btn btn-secondary">
        Split dropup
      </button>
      <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split"
        data-bs-toggle="dropdown" aria-expanded="false">
        <span class="visually-hidden">Toggle Dropdown</span>
      </button>
      <ul class="dropdown-menu">
        <li><a class="dropdown-item active" href="#">Action</a></li>
        <li><a class="dropdown-item" href="#">Another action</a></li>
        <li><a class="dropdown-item" href="#">Something else here</a></li>
        <li>
          <hr class="dropdown-divider">
        </li>
        <li><a class="dropdown-item" href="#">Separated link</a></li>
      </ul>
    </div>
    <hr>
    <div class="btn-group dropend">
      <button type="button" class="btn btn-secondary dropdown-toggle me-2" data-bs-toggle="dropdown"
        aria-expanded="false">
        Dropright
      </button>
      <ul class="dropdown-menu">
        <li><a class="dropdown-item active" href="#">Action</a></li>
        <li><a class="dropdown-item" href="#">Another action</a></li>
        <li><a class="dropdown-item" href="#">Something else here</a></li>
        <li>
          <hr class="dropdown-divider">
        </li>
        <li><a class="dropdown-item" href="#">Separated link</a></li>
      </ul>
    </div>
    <div class="btn-group dropend">
      <button type="button" class="btn btn-secondary">
        Split dropend
      </button>
      <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split"
        data-bs-toggle="dropdown" aria-expanded="false">
        <span class="visually-hidden">Toggle Dropright</span>
      </button>
      <ul class="dropdown-menu">
        <li><a class="dropdown-item active" href="#">Action</a></li>
        <li><a class="dropdown-item" href="#">Another action</a></li>
        <li><a class="dropdown-item" href="#">Something else here</a></li>
        <li>
          <hr class="dropdown-divider">
        </li>
        <li><a class="dropdown-item" href="#">Separated link</a></li>
      </ul>
    </div>
    <hr>
    <div class="btn-group dropstart">
      <button type="button" class="btn btn-secondary dropdown-toggle me-2" data-bs-toggle="dropdown"
        aria-expanded="false">
        Dropstart
      </button>
      <ul class="dropdown-menu">
        <li><a class="dropdown-item active" href="#">Action</a></li>
        <li><a class="dropdown-item" href="#">Another action</a></li>
        <li><a class="dropdown-item" href="#">Something else here</a></li>
        <li>
          <hr class="dropdown-divider">
        </li>
        <li><a class="dropdown-item" href="#">Separated link</a></li>
      </ul>
    </div>
    <div class="btn-group">
      <div class="btn-group dropstart" role="group">
        <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split"
          data-bs-toggle="dropdown" aria-expanded="false">
          <span class="visually-hidden">Toggle Dropstart</span>
        </button>
        <ul class="dropdown-menu">
          <li><a class="dropdown-item active" href="#">Action</a></li>
          <li><a class="dropdown-item" href="#">Another action</a></li>
          <li><a class="dropdown-item" href="#">Something else here</a></li>
          <li>
            <hr class="dropdown-divider">
          </li>
          <li><a class="dropdown-item" href="#">Separated link</a></li>
          </ul>
      </div>
      <button type="button" class="btn btn-secondary">
        Split dropstart
      </button>
    </div>
    <hr>
    <div class="btn-group">
      <button class="btn btn-secondary dropdown-toggle me-2" type="button" id="dropdownMenuButton"
        data-bs-toggle="dropdown" aria-expanded="false">
        Dropdown
      </button>
      <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
        <li><a class="dropdown-item" href="#">Menu item</a></li>
        <li><a class="dropdown-item" href="#">Menu item</a></li>
        <li><a class="dropdown-item" href="#">Menu item</a></li>
      </ul>
    </div>
    <div class="btn-group">
      <button type="button" class="btn btn-secondary dropdown-toggle me-2" data-bs-toggle="dropdown"
        aria-expanded="false">
        Right-aligned menu
      </button>
      <ul class="dropdown-menu dropdown-menu-end">
        <li><a class="dropdown-item" href="#">Menu item</a></li>
        <li><a class="dropdown-item" href="#">Menu item</a></li>
        <li><a class="dropdown-item" href="#">Menu item</a></li>
      </ul>
    </div>
    <div class="btn-group">
      <button type="button" class="btn btn-secondary dropdown-toggle me-2" data-bs-toggle="dropdown"
        data-bs-display="static" aria-expanded="false">
        Left-aligned, right-aligned lg
      </button>
      <ul class="dropdown-menu dropdown-menu-lg-end">
        <li><a class="dropdown-item" href="#">Menu item</a></li>
        <li><a class="dropdown-item" href="#">Menu item</a></li>
        <li><a class="dropdown-item" href="#">Menu item</a></li>
      </ul>
    </div>
    <div class="btn-group">
      <button type="button" class="btn btn-secondary dropdown-toggle mb-2 me-2" data-bs-toggle="dropdown"
        data-bs-display="static" aria-expanded="false">
        Right-aligned, left-aligned lg
      </button>
      <ul class="dropdown-menu dropdown-menu-end dropdown-menu-lg-start">
        <li><a class="dropdown-item" href="#">Menu item</a></li>
        <li><a class="dropdown-item" href="#">Menu item</a></li>
        <li><a class="dropdown-item" href="#">Menu item</a></li>
      </ul>
    </div>
    <div class="btn-group dropstart">
      <button type="button" class="btn btn-secondary dropdown-toggle me-2" data-bs-toggle="dropdown"
        aria-expanded="false">
        Dropstart
      </button>
      <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Menu item</a></li>
        <li><a class="dropdown-item" href="#">Menu item</a></li>
        <li><a class="dropdown-item" href="#">Menu item</a></li>
      </ul>
    </div>
    <div class="btn-group dropend">
      <button type="button" class="btn btn-secondary dropdown-toggle me-2" data-bs-toggle="dropdown"
        aria-expanded="false">
        Dropend
      </button>
      <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Menu item</a></li>
        <li><a class="dropdown-item" href="#">Menu item</a></li>
        <li><a class="dropdown-item" href="#">Menu item</a></li>
      </ul>
    </div>
    <div class="btn-group dropup">
      <button type="button" class="btn btn-secondary dropdown-toggle me-2" data-bs-toggle="dropdown"
        aria-expanded="false">
        Dropup
      </button>
      <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Menu item</a></li>
        <li><a class="dropdown-item" href="#">Menu item</a></li>
        <li><a class="dropdown-item" href="#">Menu item</a></li>
      </ul>
    </div>
    <hr>
  </div>
</div>